<!-- 商品列表 -->
<template>
	<view class="goods_list">
		<view class="list_title">
			<view class="treetop"></view>
			<text>产品分类 /Product category</text>
		</view>
		<view class="list_ul">
			<view class="list_li" v-for="(exit,index) in listData" :key="index"
				@click.stop="navigate('/pages/product-center/product-center?_id=' + exit._id)">
				<view class="list_img">
					<image :src="exit.image[0].url" mode="aspectFill"></image>
				</view>
				<view class="list_name">
					<text class="ponent zh_name">{{exit.title}}</text>
					<text class="ponent en_name">{{exit.en_title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCategory
	} from '../../utils/http_data.js';
	export default {
		name: "list",
		data() {
			return {
				localImage: '/static/images/classification01.png',
				listData: []
			};
		},
		mounted() {
			this.getCategoryfun()
		},
		methods: {
			// 请求产品中心分类数据
			getCategoryfun() {
				getCategory().then((data) => {
					console.log(data.data)
					this.listData = data.data;
				})
			},
			navigate(url) {
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>

<style scoped>
	.goods_list {
		width: 1360px;
		margin: 0 auto;
	}

	.list_title {
		width: 100%;
		height: 90px;
		line-height: 90px;
		display: flex;
		font-size: 16px;
		font-weight: 400;
	}

	.treetop {
		width: 5px;
		height: 15px;
		background-color: #D9001B;
		margin-top: 38px;
		margin-right: 6px;
	}

	.list_ul {
		width: 1360px;
		min-height: 870px;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		/* max-width: calc(5 * (270px + 20px)); */
	}

	.list_li {
		width: 254px;
		height: 254px;
		background-color: #F5F5F5;
		/* overflow: hidden; */
		display: inline-block;
		transition: transform 0.3s ease;
		border-radius: 8px;
		cursor: pointer;
	}

	.list_li:hover {
		transform: translateY(-10px);
	}

	.list_img {
		width: 75%;
		height: 75%;
		margin: 10px auto 10px;
	}

	.list_li image {
		width: 100%;
		height: 100%;
	}


	.list_name {
		width: 100%;
		/* height: 25%; */
		overflow: hidden;
	}

	.ponent {
		display: block;
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		/* line-height: 10px; */
	}

	.zh_name {
		/* margin-top: 30px; */
	}

	.en_name {}
</style>